<template>
    <div class="data_pass_wide_body">
        <div class="data_pass_narrow_body">
            <div v-if="step === 0">
                <!-- <div class="change_pass_item_box">
                    <div class="left">修改密码</div>
                    <div class="right">
                        <el-button @click="getLocalAuthList">获取验证方式</el-button>
                    </div>
                </div> -->
                <div class="change_pass_item_box">
                    <div class="left"><span>验证方式</span></div>
                    <div class="right">
                    <el-select v-model="authType" @change="handlerSelectChange" placeholder="请选择验证类型">
                        <el-option
                        v-for="item in localAuthObj"
                        :key="item.authType"
                        :label="item.authContent"
                        :value="item.authType">
                        </el-option>
                    </el-select>
                    </div>
                </div>
                <div class="change_pass_item_box" v-if="authType === 0">
                    <div class="left"><span>密码</span></div>
                    <div class="right">
                        <el-input v-model="dataForm.oldPassword" placeholder="旧密码" ></el-input>
                    </div>
                </div>
                <div class="change_pass_item_box" v-if="authType === 1 || authType === 2">
                    <div class="left"><span>验证码</span></div>
                    <div class="right">
                        <el-input v-model="dataForm.veriCode" placeholder="验证码" ></el-input>
                        <el-button primary @click="getVeriCode()"  :disabled="buttonDisabled" style="width: 112px">{{buttonInfo}}</el-button>
                    </div>
                </div>
                <div class="change_pass_item_box">
                    <div class="center">
                        <el-button @click="verify">验证</el-button><span style="color:red">{{verifyBtnInfo}}</span>
                    </div>
                </div>
            </div>
            <div v-if="step === 1">
                <div class="change_pass_item_box">
                    <div class="left">新密码</div>
                    <div class="right">
                    <el-input v-model="dataForm.newPassword" placeholder="请输入新密码" style="width:140px"></el-input>
                    </div>
                </div>
                <div class="change_pass_item_box">
                    <div class="left">新密码</div>
                    <div class="right">
                    <el-input v-model="dataForm.checkPassword" placeholder="请再输入一次" style="width:140px"></el-input>
                    </div>
                </div>
                <div class="change_pass_item_box">
                    <div class="center">
                        <el-button @click="doChangePassword()">修改</el-button><span style="color:red">{{changeBtnInfo}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  components: {
    
  },
  mounted() {
    this.getLocalAuthList()
  },
  computed:{
    localAuthObj: function(){
        var _obj = { default:{authId: 0, authType: 0, authContent:"旧密码"} }
        var _list = this.localAuthList;
        for(var i = 0;i<_list.length;i++){
            if(_list[i].authType == 1){
                _obj.phone = _list[i];
            }else if(_list[i].authType == 2){
                _obj.email = _list[i];
            }
        }

        return _obj
    },
    authObj:function(){
        // this.getAuthObj();
        var _type = this.authType;
        var _obj  = this.localAuthObj;
        if(_type === 0){
            return _obj.default
        }else if(_type === 1){
            return _obj.phone
        }else if(_type === 2){
            return _obj.email
        }else{
            return {};
        }
    },
  },
  data() {
    return {
        step:0,
        authType: 0,
        uid: this.currentUser.user.uid,
        buttonDisabled: false,
        buttonInfo: "获取验证码",
        countdown: 0,
        verifyBtnInfo:'',
        changeBtnInfo:'',
        dataForm:{
            oldPassword:'',
            veriCode:"",
            newPassword:"",
            checkPassword:'',
        },
        localAuthList:[],
    }
  },
  methods: {
    // select选中值发生修改
    handlerSelectChange(){
        this.dataForm.veriCode = ''
        this.dataForm.oldPassword = ''
    },
    // 获取认证方式
    getLocalAuthList(){
        this.$http1({
            url: this.$http.adornUrl(`/user/user/local/auth/info/${this.uid}`),
            method: "post",
        }).then(({ data }) => {
            this.$message({
            type: "success",
            message: "获取本地认证成功!",
            });
            this.localAuthList = data.list;
            console.log("本地认证", this.localAuthList)
        });
    },
    // 获取验证码
    getVeriCode(){
        var data = {
            uid: this.currentUser.user.uid,
            authType: this.authObj.authType,
            authContent: this.authObj.authContent,
        };
        console.log("获取验证码。。。。。。", data)
        this.buttonDisabled = true;
        this.countdown = 3;
        this.buttonInfo = this.countdown + 's'
        this.timer = setInterval(() => {
            this.countdown--;
            if(this.countdown == 0){
                this.buttonDisabled = false;
                clearInterval(this.timer)
                this.buttonInfo = "获取验证码"
            }else{
                this.buttonInfo = this.countdown + 's'
            }
        }, 1000);
        // return;
        this.$http1({
          url: this.$http.adornUrl("/user/user/local/auth/verify"),
          method: "post",
          data: this.$http.adornData(data, false)
        }).then(({ data }) => {
          this.$message({
            type: "success",
            message: "发送验证码成功!",
          });
          
        });
    },
    // 进行验证
    verify(){
        // this.step = 1
        // return;

        console.log("authObj", this.authObj);
        var _veriCode = '';
        if(this.authObj.authType == 0){
            _veriCode = this.dataForm.oldPassword;
            if(_veriCode === ''){
                this.verifyBtnInfo = '请输入旧密码'
                return
            }
        }else{
            _veriCode = this.dataForm.veriCode;
            if(_veriCode === ''){
                this.verifyBtnInfo = '请输入验证码'
                return
            }
        }
        this.verifyBtnInfo = ''
        var data = {
            uid: this.uid,
            authType: this.authObj.authType,
            authContent: this.authObj.authContent,
            veriCode: _veriCode,
        }
        console.log("验证", data)
        this.$http1({
          url: this.$http.adornUrl("/user/user/local/auth/auth"),
          method: "post",
          data: this.$http.adornData(data, false)
        }).then(({ data }) => {
            if(data.code === 10210){
                this.$message({
                    type: "success",
                    message: "身份认证成功!",
                });
                this.verifyBtnInfo = '';
                this.step = 1
            }else{
                this.verifyBtnInfo = data.msg;
            }
          
          
        });
    },
    // 修改密码
    doChangePassword(){
        console.log( "前端检测",typeof(this.dataForm.newPassword) )
        if (this.dataForm.newPassword === '') {
            this.changeBtnInfo = '请输入新密码'
            return
        } else if (this.dataForm.checkPassword === '') {
            this.changeBtnInfo = '请再次输入新密码'
            return 
        } else if (this.dataForm.newPassword !== this.dataForm.checkPassword) {
            this.changeBtnInfo = '两次密码不一致'
            return
        }
        this.changeBtnInfo = ''
        var data = {
            uid: this.uid,
            password: this.dataForm.newPassword,
        }
        console.log("修改密码", data)
        this.$http1({
          url: this.$http.adornUrl("/user/login/user/update"),
          method: "post",
          data: this.$http.adornData(data, false)
        }).then(({ data }) => {
            if(data.code === 0){
                this.$message({
                    type: "success",
                    message: "修改密码成功!",
                });
                this.changeBtnInfo = ''
            }else{
                this.changeBtnInfo = data.msg;
            }
          
          
        });
    },
  },
}
</script>

<style>
.data_pass_wide_body{
    /* background: #924eff; */
    margin-top: 10px;
}
.data_pass_narrow_body{
    /* background: #8848ff; */
    width: 90%;
    margin: 0 auto;
}
.change_pass_item_box{
    /* background: #752bff; */
    display: flex;
    margin-bottom: 20px;
}
.change_pass_item_box .left{
    width: 300px;
    text-align: right;
    padding-top: 10px;
    margin-right: 20px;
}
.change_pass_item_box .right{

}
.change_pass_item_box .right .el-select--medium{
    width: 200px;
}
.change_pass_item_box .right .el-input--medium{
    width: 200px;
}
.change_pass_item_box .center{
    margin-left: 300px;
}
</style>